<template>
  <div id="">
    <header id="header" class="alt" ref="headerRef">
      <div class="logo">
        <a href="/main">Drone <span>SoundSentinel开发</span></a>
      </div>
      <!-- menu菜单 -->
      <a href="#menu">菜单</a>
    </header>
    
    <!-- Nav -->
    <nav id="menu" ref="menuRef">
      <ul class="links">
        <li><a href="/main">首页</a></li>
        <li><a href="/records">飞行记录</a></li>
      </ul>
    </nav>
    
    <!-- Banner -->
    <section class="banner full" ref="bannerRef">
      <article><img src="../images/slide01.jpg" alt="" width="1440" height="961" class="slide-img">
        <div class="inner">
          <header>
            <p>声学无人机监测</p>
            <h2>声音监测</h2>
          </header>
        </div>
      </article>
      <article><img src="../images/slide02.jpg" alt="" width="1440" height="961" class="slide-img">
        <div class="inner">
          <header>
            <p>声学无人机监测</p>
            <h2>信号处理</h2>
          </header>
        </div>
      </article>
      <article><img src="../images/slide03.jpg" alt="" width="1440" height="962" class="slide-img">
        <div class="inner">
          <header>
            <p>声学无人机监测</p>
            <h2>特征提取</h2>
          </header>
        </div>
      </article>
      <article><img src="../images/slide04.jpg" alt="" width="1440" height="961" class="slide-img">
        <div class="inner">
          <header>
            <p>声学无人机监测</p>
            <h2>目标识别</h2>
          </header>
        </div>
      </article>
      <article><img src="../images/slide05.jpg" alt="" width="1440" height="962" class="slide-img">
        <div class="inner">
          <header>
            <p>声学无人机监测</p>
            <h2>定位跟踪</h2>
          </header>
        </div>
      </article>
      <div class="loading-indicator" v-if="!imagesLoaded">
        <div class="spinner"></div>
      </div>
    </section>
    
    <!-- One -->
    <section id="one" class="wrapper style2">
      <div class="inner">
        <div class="grid-style">
          <div>
            <div class="box">
              <div class="image fit">
                <img src="../images/pic02.jpg" alt="" width="600" height="300">
              </div>
              <div class="content">
                <header class="align-center">
                  <p>麦克风阵列监测</p>
                  <h2>声音监测</h2>
                </header>
                <p>声学无人机监测技术，通过声音传感器捕捉环境中的声波信号，实现对无人机的精准检测、识别与定位。</p>
                <footer class="align-center"><a href="#" class="button alt">了解更多</a></footer>
              </div>
            </div>
          </div>
          <div>
            <div class="box">
              <div class="image fit">
                <img src="../images/pic03.jpg" alt="" width="600" height="300">
              </div>
              <div class="content">
                <header class="align-center">
                  <p>打破局限，用飞行智慧赋能科技变革</p>
                  <h2>定位跟踪</h2>
                </header>
                <p>先进的声学分析方法，从复杂的声音背景中提取出无人机的独特声纹特征，为无人机监测提供了一种高效、可靠的手段。</p>
                <footer class="align-center"><a href="#" class="button alt">了解更多</a></footer>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    
    <!-- Two -->
    <section id="two" class="wrapper style3">
      <div class="inner">
        <header class="align-center">
          <p>跨越险阻，助力无人机检测技术发展新征程</p>
          <h2>无人机</h2>
        </header>
      </div>
    </section>
    
    <!-- Three -->
    <section id="three" class="wrapper style2">
      <div class="inner">
        <header class="align-center">
          <p class="special">打破局限，用飞行智慧赋能科技变革</p>
          <h2>无人机</h2>
        </header>
        <div class="gallery">
          <div>
            <div class="image fit">
              <a href="#"><img src="../images/1.png" alt="" width="600" height="300"></a>
            </div>
          </div>
          <div>
            <div class="image fit">
              <a href="#"><img src="../images/2.png" alt="" width="600" height="300"></a>
            </div>
          </div>
          <div>
            <div class="image fit">
              <a href="#"><img src="../images/3.jpg" alt="" width="600" height="300"></a>
            </div>
          </div>
          <div>
            <div class="image fit">
              <a href="#"><img src="../images/4.jpg" alt="" width="600" height="300"></a>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Footer -->
    <footer id="footer">
      <div class="container">
        <ul class="icons">
          <li><a href="#" class="icon fa-twitter"><span class="label">推特</span></a></li>
          <li><a href="#" class="icon fa-facebook"><span class="label">脸书</span></a></li>
          <li><a href="#" class="icon fa-instagram"><span class="label">Instagram</span></a></li>
          <li><a href="#" class="icon fa-envelope-o"><span class="label">邮箱</span></a></li>
        </ul>
      </div>
    </footer>
    <div class="copyright">
      <a>SoundSentinel制作</a>
    </div>
  </div>
</template>

<script setup>
import $ from 'jquery';
import '../assets/css/main.css'
import { nextTick, onMounted, ref } from 'vue'

const menuRef = ref(null);
const headerRef = ref(null);
const bannerRef = ref(null);
const imagesLoaded = ref(false);

// 预加载所有图片
const preloadImages = () => {
  return new Promise((resolve) => {
    const images = [
      '../images/slide01.jpg',
      '../images/slide02.jpg',
      '../images/slide03.jpg',
      '../images/slide04.jpg',
      '../images/slide05.jpg',
      '../images/pic02.jpg',
      '../images/pic03.jpg',
      '../images/1.png',
      '../images/2.png',
      '../images/3.jpg',
      '../images/4.jpg'
    ];
    
    let loadedCount = 0;
    const totalImages = images.length;

    if (totalImages === 0) {
      resolve();
      return;
    }

    const checkLoaded = () => {
      loadedCount++;
      if (loadedCount === totalImages) {
        imagesLoaded.value = true;
        resolve();
      }
    };

    images.forEach(src => {
      const img = new Image();
      img.src = src;
      img.onload = checkLoaded;
      img.onerror = checkLoaded;
    });
  });
};

onMounted(async () => {
  // 预加载图片
  await preloadImages();
  
  // 确保DOM更新完成
  await nextTick();

  var settings = {
    banner: {
      indicators: true,
      speed: 1500,
      delay: 5000,
      parallax: 0.25
    }
  };

  (function($) {
    skel.breakpoints({
      xlarge: '(max-width: 1680px)',
      large: '(max-width: 1280px)',
      medium: '(max-width: 980px)',
      small: '(max-width: 736px)',
      xsmall: '(max-width: 480px)'
    });

    $.fn._parallax = (skel.vars.browser == 'ie' || skel.vars.mobile) ? function() { return $(this) } : function(intensity) {
      var $window = $(window),
        $this = $(this);

      if (this.length == 0 || intensity === 0)
        return $this;

      if (this.length > 1) {
        for (var i=0; i < this.length; i++)
          $(this[i])._parallax(intensity);
        return $this;
      }

      if (!intensity)
        intensity = 0.25;

      $this.each(function() {
        var $t = $(this),
          on, off;

        on = function() {
          $t.css('background-position', 'center 100%, center 100%, center 0px');
          $window.on('scroll._parallax', function() {
            var pos = parseInt($window.scrollTop()) - parseInt($t.position().top);
            $t.css('background-position', 'center ' + (pos * (-1 * intensity)) + 'px');
          });
        };

        off = function() {
          $t.css('background-position', '');
          $window.off('scroll._parallax');
        };

        skel.on('change', function() {
          if (skel.breakpoint('medium').active)
            (off)();
          else
            (on)();
        });
      });

      $window.off('load._parallax resize._parallax').on('load._parallax resize._parallax', function() {
        $window.trigger('scroll');
      });

      return $(this);
    };

    $.fn._slider = function(options) {
      var $window = $(window),
        $this = $(this);

      if (this.length == 0)
        return $this;

      if (this.length > 1) {
        for (var i=0; i < this.length; i++)
          $(this[i])._slider(options);
        return $this;
      }

      var current = 0, pos = 0, lastPos = 0,
        slides = [], indicators = [],
        $indicators,
        $slides = $this.children('article'),
        intervalId,
        isLocked = false,
        i = 0;

      if ($slides.length == 1)
        options.indicators = false;

      $this._switchTo = function(x, stop) {
        if (isLocked || pos == x)
          return;

        isLocked = true;

        if (stop)
          window.clearInterval(intervalId);

        lastPos = pos;
        pos = x;

        slides[lastPos].removeClass('top');
        if (options.indicators)
          indicators[lastPos].removeClass('visible');

        slides[pos].addClass('visible').addClass('top');
        if (options.indicators)
          indicators[pos].addClass('visible');

        window.setTimeout(function() {
          slides[lastPos].addClass('instant').removeClass('visible');
          window.setTimeout(function() {
            slides[lastPos].removeClass('instant');
            isLocked = false;
          }, 100);
        }, options.speed);
      };

      if (options.indicators)
        $indicators = $('<ul class="indicators"></ul>').appendTo($this);

      $slides.each(function() {
        var $slide = $(this),
          $img = $slide.find('img');

        $slide.css('background-image', 'url("' + $img.attr('src') + '")')
          .css('background-position', ($slide.data('position') ? $slide.data('position') : 'center'));

        slides.push($slide);

        if (options.indicators) {
          var $indicator_li = $('<li>' + i + '</li>').appendTo($indicators);
          $indicator_li.data('index', i).on('click', function() {
            $this._switchTo($(this).data('index'), true);
          });
          indicators.push($indicator_li);
        }
        i++;
      })._parallax(options.parallax);

      slides[pos].addClass('visible').addClass('top');
      if (options.indicators)
        indicators[pos].addClass('visible');

      if (slides.length == 1)
        return;

      intervalId = window.setInterval(function() {
        current++;
        if (current >= slides.length)
          current = 0;
        $this._switchTo(current);
      }, options.delay);
    };

    $.fn.navList = function() {
      var $this = $(this);
      $a = $this.find('a'),
      b = [];

      $a.each(function() {
        var $this = $(this),
          indent = Math.max(0, $this.parents('li').length - 1),
          href = $this.attr('href'),
          target = $this.attr('target');

        b.push(
          '<a ' +
            'class="link depth-' + indent + '"' +
            ( (typeof target !== 'undefined' && target != '') ? ' target="' + target + '"' : '') +
            ( (typeof href !== 'undefined' && href != '') ? ' href="' + href + '"' : '') +
          '>' +
            '<span class="indent-' + indent + '"></span>' +
            $this.text() +
          '</a>'
        );
      });

      return b.join('');
    };

    $.fn.panel = function(userConfig) {
      if (this.length == 0)
        return $this;

      if (this.length > 1) {
        for (var i=0; i < this.length; i++)
          $(this[i]).panel(userConfig);
        return $this;
      }

      var $this = $(this),
        $body = $('body'),
        $window = $(window),
        id = $this.attr('id'),
        config;

      config = $.extend({
        delay: 0,
        hideOnClick: false,
        hideOnEscape: false,
        hideOnSwipe: false,
        resetScroll: false,
        resetForms: false,
        side: null,
        target: $this,
        visibleClass: 'visible'
      }, userConfig);

      if (typeof config.target != 'jQuery')
        config.target = $(config.target);

      $this._hide = function(event) {
        if (!config.target.hasClass(config.visibleClass))
          return;

        if (event) {
          event.preventDefault();
          event.stopPropagation();
        }

        config.target.removeClass(config.visibleClass);

        window.setTimeout(function() {
          if (config.resetScroll)
            $this.scrollTop(0);

          if (config.resetForms)
            $this.find('form').each(function() {
              this.reset();
            });
        }, config.delay);
      };

      $this
        .css('-ms-overflow-style', '-ms-autohiding-scrollbar')
        .css('-webkit-overflow-scrolling', 'touch');

      if (config.hideOnClick) {
        $this.find('a').css('-webkit-tap-highlight-color', 'rgba(0,0,0,0)');
        $this.on('click', 'a', function(event) {
          var $a = $(this),
            href = $a.attr('href'),
            target = $a.attr('target');

          if (!href || href == '#' || href == '' || href == '#' + id)
            return;

          event.preventDefault();
          event.stopPropagation();
          $this._hide();

          window.setTimeout(function() {
            if (target == '_blank')
              window.open(href);
            else
              window.location.href = href;
          }, config.delay + 10);
        });
      }

      $this.on('touchstart', function(event) {
        $this.touchPosX = event.originalEvent.touches[0].pageX;
        $this.touchPosY = event.originalEvent.touches[0].pageY;
      });

      $this.on('touchmove', function(event) {
        if ($this.touchPosX === null || $this.touchPosY === null)
          return;

        var diffX = $this.touchPosX - event.originalEvent.touches[0].pageX,
          diffY = $this.touchPosY - event.originalEvent.touches[0].pageY,
          th = $this.outerHeight(),
          ts = ($this.get(0).scrollHeight - $this.scrollTop());

        if (config.hideOnSwipe) {
          var result = false,
            boundary = 20,
            delta = 50;

          switch (config.side) {
            case 'left':
              result = (diffY < boundary && diffY > (-1 * boundary)) && (diffX > delta);
              break;
            case 'right':
              result = (diffY < boundary && diffY > (-1 * boundary)) && (diffX < (-1 * delta));
              break;
            case 'top':
              result = (diffX < boundary && diffX > (-1 * boundary)) && (diffY > delta);
              break;
            case 'bottom':
              result = (diffX < boundary && diffX > (-1 * boundary)) && (diffY < (-1 * delta));
              break;
            default:
              break;
          }

          if (result) {
            $this.touchPosX = null;
            $this.touchPosY = null;
            $this._hide();
            return false;
          }
        }

        if (($this.scrollTop() < 0 && diffY < 0) || (ts > (th - 2) && ts < (th + 2) && diffY > 0)) {
          event.preventDefault();
          event.stopPropagation();
        }
      });

      $this.on('click touchend touchstart touchmove', function(event) {
        event.stopPropagation();
      });

      $this.on('click', 'a[href="#' + id + '"]', function(event) {
        event.preventDefault();
        event.stopPropagation();
        config.target.removeClass(config.visibleClass);
      });

      $body.on('click touchend', function(event) {
        $this._hide(event);
      });

      $body.on('click', 'a[href="#' + id + '"]', function(event) {
        event.preventDefault();
        event.stopPropagation();
        config.target.toggleClass(config.visibleClass);
      });

      if (config.hideOnEscape)
        $window.on('keydown', function(event) {
          if (event.keyCode == 27)
            $this._hide(event);
        });

      return $this;
    };
  })($);

  $(function() {
    var $window = $(window),
      $body = $('body'),
      $header = $(headerRef.value),
      $banner = $(bannerRef.value);

    $body.addClass('is-loading');

    // 确保所有资源加载完成后再初始化
    const initSlider = () => {
      $banner._slider(settings.banner);
      $body.removeClass('is-loading');
    };

    // 如果图片已经预加载完成，直接初始化
    if (imagesLoaded.value) {
      initSlider();
    } else {
      // 否则等待图片加载完成
      const checkLoaded = setInterval(() => {
        if (imagesLoaded.value) {
          clearInterval(checkLoaded);
          initSlider();
        }
      }, 100);
    }

    skel.on('+medium -medium', function() {
      $.prioritize(
        '.important\\28 medium\\29',
        skel.breakpoint('medium').active
      );
    });

    const $menu = $(menuRef.value);
    $menu
      .append('<a href="#menu" class="close"></a>')
      .appendTo($body)
      .panel({
        delay: 500,
        hideOnClick: true,
        hideOnSwipe: true,
        resetScroll: true,
        resetForms: true,
        side: 'right'
      });

    if (skel.vars.IEVersion < 9)
      $header.removeClass('alt');

    if ($banner.length > 0 && $header.hasClass('alt')) {
      $window.on('resize', function() { $window.trigger('scroll'); });
    }

    $(window).on('beforeunload', function() {
      window.scrollTo(0, 0);
    });
    
    $(window).on('load', function() {
      window.scrollTo(0, 0);
    });
  });
});
</script>

<style scoped>
/* 添加加载动画样式 */
.loading-indicator {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 100;
}

.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top: 4px solid #fff;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.slide-img {
  opacity: 0;
  transition: opacity 0.5s ease;
}

.slide-img.loaded {
  opacity: 1;
}

.is-loading {
  overflow: hidden;
}

.is-loading::after {
  content: '';
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  border: 4px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top: 4px solid #fff;
  animation: spin 1s linear infinite;
  z-index: 9999;
}
</style>